<template>
  <div class="tagmanage">
    <Layout :style="{ padding: '0 24px 24px' }">
      <Breadcrumb :style="{ margin: '24px 0' }">
        <BreadcrumbItem to="/home">
          <Icon type="ios-home-outline"></Icon>形拓资源网
        </BreadcrumbItem>
        <BreadcrumbItem>
          <Icon type="ios-list-box-outline" />个人中心</BreadcrumbItem>
        <BreadcrumbItem>
          <Icon type="ios-clipboard-outline" />标签管理</BreadcrumbItem>
      </Breadcrumb>
      <Content class="usercontent"
               :style="{
          padding: '24px',
          background: '#fff'
        }">
        <h2 class="title">标签管理</h2>
        <Divider />
        <div class="firstindexs">
          <Tag color="primary"
               size="large">一级索引列表</Tag>
          <Button class="edit1"
                  icon="md-create"
                  @click.native="editTag1">
            编辑索引 </Button><br /><br />
          <Tag v-for="(item, index) in firstIndexlist"
               :key="index"
               :name="item.categoryName"
               class="tag1"
               :class="{ selecttag: flag1 === index }"
               size="large"
               closable
               fade
               @click.native="clicktag1(item.categoryId, index)"
               @on-close="deleteTag1">{{ item.categoryName }}</Tag>
          <Button icon="ios-add"
                  type="dashed"
                  @click="handleAdd1">添加一级索引</Button>
        </div>
        <div class="blank"></div>
        <div class="secondindexs">
          <Tag color="primary"
               size="large">二级索引列表</Tag>
          <Button class="edit1"
                  icon="md-create"
                  @click.native="editTag2">编辑索引</Button><br /><br />
          <Tag v-for="(item, index) in secondIndexlist"
               :key="index"
               :name="item.detailName"
               class="tag2"
               :class="{ selecttag: flag2 === index }"
               size="large"
               closable
               @on-close="deleteTag2"
               @click.native="clicktag2(item.categoryId, index)">{{ item.detailName }}</Tag>
          <Button icon="ios-add"
                  type="dashed"
                  @click="handleAdd2">添加二级索引</Button>
        </div>
      </Content>
    </Layout>
    <Modal v-model="modal1"
           class="modal"
           title="添加一级索引"
           @on-ok="addOk1"
           @on-cancel="addCancel1">
      <Input v-model="value1"
             placeholder="请输入需要添加的一级索引名"
             style="width: 300px" />
    </Modal>
    <Modal v-model="modal2"
           class="modal"
           title="添加二级索引"
           @on-ok="addOk2"
           @on-cancel="addCancel2">
      <Input v-model="value2"
             placeholder="请输入需要添加的二级索引名"
             style="width: 300px" />
    </Modal>
    <Modal v-model="editshow1"
           class="modal"
           title="修改一级索引"
           @on-ok="editOK1">
      <Input v-model="editinput1"
             placeholder="请输入新的一级索引名"
             style="width: 300px" />
    </Modal>
    <Modal v-model="editshow2"
           class="modal"
           title="修改二级索引"
           @on-ok="editOK2">
      <Input v-model="editinput2"
             placeholder="请输入新的二级索引名"
             style="width: 300px" />
    </Modal>
  </div>
</template>
<script>
import UserApi from "../../api/Userapi.js";
export default {
  data () {
    return {
      firstIndexlist: [],
      secondIndexlist: [],
      flag1: 0,
      flag2: -1,
      modal1: false,
      modal2: false,
      value1: "",
      value2: "",
      currentfirstIndex: -1,
      deleteId1: -1,
      deleteId2: -1,
      editshow1: false,
      editshow2: false,
      editinput1: "",
      editinput2: ""
    };
  },
  methods: {
    getfirstIndex () {
      //获取一级索引列表
      this.axios.get(UserApi.firstIndex).then(res => {
        if (res.data.status == 0) {
          this.firstIndexlist = res.data.data;
          this.currentfirstIndex = this.firstIndexlist[0].categoryId; //默认选中第一个类别
        }
      });
    },
    initTaglist () {
      //初始化标签列表
      //获取一级索引列表
      this.axios.get(UserApi.firstIndex).then(res => {
        if (res.data.status == 0) {
          this.firstIndexlist = res.data.data;
          this.currentfirstIndex = this.firstIndexlist[0].categoryId; //默认选中第一个类别
          this.showsecondtag(this.currentfirstIndex)
        }
      });
    },
    showsecondtag (item) {
      //获取二级索引列表
      window.console.log(this.currentfirstIndex)
      this.axios
        .get(UserApi.secondIndex, {
          params: {
            detailCategoryId: item
          }
        })
        .then(res => {
          if (res.data.status == 0) {
            window.console.log("二级索引列表", res.data.data);
            this.secondIndexlist = res.data.data;
          } else {
            this.$Message.info("获取二级索引失败");
          }
        });
    },
    clicktag1 (item, index) {
      //点击一级索引标签
      this.showsecondtag(item);
      this.currentfirstIndex = item;
      this.flag1 = index;
      this.flag2 = -1; //点击一级索引二级索引选中状态清除
    },
    clicktag2 (item, index) {
      //点击一级索引标签
      this.flag2 = index;
    },
    handleAdd1 () {
      //添加一级索引按钮点击事件
      this.modal1 = true;
    },
    addOk1 () {
      if (this.value1.length === 0) {
        this.$Message.error("添加一级索引失败：未输入名称");
      } else {
        this.axios
          .get(UserApi.addFirstIndex, {
            params: { categoryName: this.value1 }
          })
          .then(res => {
            if (res.data.status == 0) {
              this.$Message.success("添加一级索引成功");
              //更新一级索引列表
              this.getfirstIndex();
              this.value1 = "";
            } else {
              this.$Message.error(res.data.msg);
            }
          });
      }
    },
    addCancel1 () {
      this.value1 = "";
    },

    handleAdd2 () {
      //添加二级索引按钮点击事件
      this.modal2 = true;
    },
    addOk2 () {
      if (this.value2.length === 0) {
        this.$Message.error("添加二级索引失败：未输入名称");
      } else {
        this.axios
          .get(UserApi.addSecondIndex, {
            params: {
              categoryId: this.currentfirstIndex,
              detailName: this.value2
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              this.$Message.success("添加二级索引成功");
              //更新一级索引列表
              this.showsecondtag(this.currentfirstIndex);
              this.value2 = "";
            } else {
              this.$Message.error("添加二级索引失败");
            }
          });
      }
    },
    addCancel2 () {
      this.value2 = "";
    },
    deleteTag1 (event, name) {
      //删除一级索引
      window.console.log(name);
      for (let i in this.firstIndexlist) {
        if (this.firstIndexlist[i].categoryName === name) {
          this.deleteId1 = this.firstIndexlist[i].categoryId;
        }
      }
      window.console.log(this.deleteId1);
      this.$Modal.confirm({
        title: "确定删除一级索引吗",
        content: "<p>删除后不可恢复</p>",
        onOk: () => {
          this.axios
            .get(UserApi.secondIndex, {
              params: {
                detailCategoryId: this.deleteId1
              }
            }) //首先判断该索引下是否存在二级索引，若存在则无法删除
            .then(res => {
              if (res.data.status == 0) {
                if (res.data.data.length !== 0) {
                  this.$Message.error("删除失败，该一级索引存在二级索引！");
                } else {
                  this.axios
                    .get(UserApi.deleteFirstIndex, {
                      params: { categoryId: this.deleteId1 }
                    })
                    .then(res => {
                      if (res.data.status == 0) {
                        this.$Message.success("删除一级索引成功");
                        //更新一级索引列表
                        this.getfirstIndex();
                      } else {
                        this.$Message.error("删除一级索引失败");
                      }
                    });
                }
              } else {
                this.$Message.error("删除一级失败");
              }
            });
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        }
      });
    },
    deleteTag2 (event, name) {
      window.console.log(name);
      for (let i in this.secondIndexlist) {
        if (this.secondIndexlist[i].detailName === name) {
          this.deleteId2 = this.secondIndexlist[i].detailId;
          this.detailCategoryId = this.secondIndexlist[i].detailCategoryId;
        }
      }
      window.console.log(this.deleteId2);
      this.$Modal.confirm({
        title: "确定删除二级索引吗",
        content: "<p>删除后不可恢复</p>",
        onOk: () => {
          this.axios
            .get(UserApi.deleteSecondIndex, {
              params: { detailId: this.deleteId2 }
            })
            .then(res => {
              if (res.data.status == 0) {
                this.$Message.success("删除二级索引成功");
                //更新二级索引列表
                this.showsecondtag(this.detailCategoryId);
              } else {
                this.$Message.error("删除二级索引失败");
              }
            });
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        }
      });
    },
    editTag1 () {
      //编辑选中的一级索引
      this.editshow1 = true;
    },
    editOK1 () {
      if (this.editinput1.length !== 0) {
        //索引名不能为空
        this.axios
          .get(UserApi.editFirstIndex, {
            params: {
              categoryId: this.firstIndexlist[this.flag1].categoryId,
              categoryName: this.editinput1
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              this.$Message.success("修改一级索引名成功");
              this.getfirstIndex();
            } else {
              this.$Message.error("修改一级索引名失败");
            }
          });
      } else {
        this.$Message.error("索引名不能为空");
      }
    },
    editTag2 () {
      //编辑选中的二级索引
      this.editshow2 = true;
    },
    editOK2 () {
      if (this.flag2 === -1) {
        this.$Message.error("请先选中一个二级索引");
      } else if (this.editinput2.length !== 0) {
        //索引名不能为空
        this.axios
          .get(UserApi.editSecondIndex, {
            params: {
              detailId: this.secondIndexlist[this.flag2].detailId,
              detailName: this.editinput2
            }
          })
          .then(res => {
            if (res.data.status == 0) {
              this.$Message.success("修改二级索引名成功");
              this.showsecondtag(this.currentfirstIndex);
            } else {
              this.$Message.error("修改二级索引名失败");
            }
          });
      } else {
        this.$Message.error("索引名不能为空");
      }
    }
  },
  mounted () {
    this.initTaglist();
  }
};
</script>
<style scoped>
.tagmanage {
  position: relative;
  width: 100%;
}
.title {
  font-size: 0.28rem;
  font-weight: 700;
  font-family: "PingFang";
}
.modal {
  font-family: "PingFang";
}
.usercontent {
  border-radius: 0.1rem;
  min-height: 4rem;
}
.adduser {
  display: inline;
}
.firstindexs {
  width: 100%;
}
.blank {
  width: 100%;
  height: 0.5rem;
}
.tag1 {
  cursor: pointer;
}
.tag2 {
  cursor: pointer;
}
.selecttag {
  border: 1px solid #004cfd;
}
.edit1 {
  margin-right: 0.05rem;
  font-family: "PingFang";
  font-size: 0.12rem;
}
</style>
